<template>
  <view class="pay u-p-20">
    <!-- 收货地址 -->
    <view class="address">
      <view class="selectAddress">
        <u-button
          v-if="!address"
          type="error"
          plain
          shape="circle"
          @click="selectAddress"
          >选择地址</u-button
        >
        <view v-else class="address-detail">
          <view class="full-address u-flex u-row-between">
            <view>
              <u-icon name="map" class="u-m-r-10"></u-icon>
              {{ detailAddress }}
            </view>
            <u-icon @tap="selectAddress" name="arrow-right"></u-icon>
          </view>
          <view class="text">
            <u-icon name="phone" class="u-m-r-10"></u-icon>
            {{ address.userName }} {{ address.telNumber }}
          </view>
        </view>
      </view>
    </view>
    <!-- 已选商品 -->
    <view class="chkgoods">
      <view class="chkgoodsList">
        <YgCell
          v-for="goods in checkedGoodsList"
          :totalShow="goods.count"
          :goodsObj="goods"
          :key="goods.goods_id"
        ></YgCell>
      </view>
    </view>
    <!-- 合计 -->
    <view class="countBox">
      <view class="price">
        合计：
        <text> {{ totalPrice }} </text>
      </view>
      <view class="goPay"> 去支付({{ totalCount }}) </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      address: null,
    };
  },
  methods: {
    // 选择地址
    async selectAddress() {
      const [err, res] = await uni.chooseAddress({});
      console.log(res);
      this.address = res;
    },
  },
  computed: {
    //   详细地址
    detailAddress() {
      if (!this.address) return "";
      const { provinceName, cityName, countyName, detailInfo } = this.address;
      return provinceName + cityName + countyName + detailInfo;
    },
    // 勾选了的商品数组
    checkedGoodsList() {
      console.log(this.$store.getters.checkedGoods);
      return this.$store.getters.checkedGoods;
    },
    // 选中了的总价格
    totalPrice() {
      return this.$store.getters.totalPrice;
    },
    // 选中了的数量
    totalCount() {
      return this.$store.getters.totalCount;
    },
  },
};
</script>

<style lang="scss" scoped>
.pay {
  background-color: #f9f9f9;
  padding-bottom: 83rpx;
  height: 100vh;
  .address {
    background-color: #fff;
    margin-bottom: 35rpx;
    height: 187rpx;
    padding: 0 30rpx;
    .selectAddress {
      height: 100%;
      position: relative;
      u-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .address-detail {
        width: 100%;
        color: #434343;
        & > view {
          font-size: 35rpx;
          font-weight: 700;
          padding: 20rpx 0;
        }
        & > .text {
          font-size: 26rpx;
        }
      }
    }
  }

  .chkgoods {
    background-color: #ffff;
    .chkgoodsList {
      ygcell {
      }
    }
  }

  .countBox {
    background-color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 16rpx 28rpx;
    .price {
      flex: 1;
      text {
        color: #eb4450;
        &::before {
          content: "￥";
          color: #eb4450;
          font-size: 20rpx;
        }
      }
    }

    .goPay {
      font-size: 21rpx;
      height: 52rpx;
      width: 150rpx;
      border-radius: 26px;
      background-color: #eb4450;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
  }
}
</style>